<template>
  <div class="mainDiv">
    <mt-cell class="cell"  v-for="cell in cells" :is-link="userInfo.score_total>=cell.score"  @click.native="goto(cell)" >
      <img slot="icon" v-bind:src="cell.icon" width="32" height="32">
      <div slot="title" class="cellTitle">
        <div class="cellName">{{cell.title.replace("#score#",cell.score)}}</div>
        <div class="cellLabel">
          {{cell.label}}
        </div>
      </div>
    </mt-cell>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "phase",
        data(){return {
          userInfo:{},
          cells:[{score:595,batch:1,title:"高考成绩#score#分以上可选",label:this.$root.year+"年填报时间6月26日-27日",icon:require("../../assets/icons/one.png"),url:"/student/province"},
            {score:496,batch:2,title:"高考成绩#score#分以上可选",label:this.$root.year+"年填报时间7月23-24日",icon:require("../../assets/icons/two.png"),url:"/student/province"},
            {score:264,batch:3,title:"高考成绩#score#分以上可选",label:this.$root.year+"年填报时间8月3-4日",icon:require("../../assets/icons/three.png"),url:"/student/province"}]
        }},
      methods:{
          goto:function (cell) {
            if(this.userInfo.score_total<cell.score){
                Toast("您的成绩此段不可选！");
                return;
            }
            let batchDate = this.$root.batchDate.find(n=>n.id==cell.batch);
            if(batchDate){
               let startTime = new Date(batchDate.val.replace(/-/g, '/')).getTime();
               if(new Date().getTime()<startTime){
                 Toast("填报时间未到("+batchDate.val+")！");
                 return;
               }
            }
            this.$router.push({path:cell.url, query:{batch:cell.batch}});
          }
      },
      created(){
        checkLogin(this);
      }
    }
</script>

<style scoped>
  .cell{
    min-height:100px;
  }
  .cellTitle{
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
  }
  .cellName{
    font-size: 18px;
    line-height: 30px;
  }
  .cellLabel{
    margin-top: 10px;
    color:lightskyblue;
  }
</style>
